<template>
	<el-drawer
		v-model="drawerVisible"
		:title="title"
		size="80%"
		:destroy-on-close="true"
		@close="handleClose"
	>
		<div class="p-4">
			<!-- 基础信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					基础信息
				</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="车牌号">
						{{ displayData?.hphm }}
					</el-descriptions-item>
					<el-descriptions-item label="车辆类型">
						{{ getVehicleTypeText(displayData?.vehicleType) }}
					</el-descriptions-item>
					<el-descriptions-item label="能源类型">
						{{ getEnergyTypeText(displayData?.energyType) }}
					</el-descriptions-item>
					<el-descriptions-item label="所属车队">
						{{ displayData?.fleetName }}
					</el-descriptions-item>
					<el-descriptions-item label="车主">
						{{ displayData?.ownerName }}
					</el-descriptions-item>
					<el-descriptions-item label="车主电话">
						{{ displayData?.ownerPhone }}
					</el-descriptions-item>
					<el-descriptions-item label="经营类型">
						{{ getBusinessTypeText(displayData?.businessType) }}
					</el-descriptions-item>
					<el-descriptions-item label="核定载质量">
						{{ displayData?.approvedLoad }} kg
					</el-descriptions-item>
					<el-descriptions-item label="总质量">
						{{ displayData?.totalMass }} kg
					</el-descriptions-item>
					<el-descriptions-item label="检定高度">
						{{ displayData?.approvedHeight }} m
					</el-descriptions-item>
					<el-descriptions-item label="检定宽度">
						{{ displayData?.approvedWidth }} m
					</el-descriptions-item>
					<el-descriptions-item label="检定长度">
						{{ displayData?.approvedLength }} m
					</el-descriptions-item>
					<el-descriptions-item label="车架号">
						{{ displayData?.frameNumber }}
					</el-descriptions-item>
					<el-descriptions-item label="发动机编号">
						{{ displayData?.engineNumber }}
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 证照信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					证照信息
				</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="行驶证编号">
						{{ displayData?.travelCertNo }}
					</el-descriptions-item>
					<el-descriptions-item label="行驶证失效日期">
						{{ displayData?.travelCertExpiry }}
					</el-descriptions-item>
					<el-descriptions-item label="道路运输许可证号">
						{{ displayData?.transportCertNo }}
					</el-descriptions-item>
					<el-descriptions-item label="运输证失效日期">
						{{ displayData?.transportCertExpiry }}
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 车检信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					车检信息
				</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="交强险生效日期">
						{{ displayData?.trafficInsuranceEffective }}
					</el-descriptions-item>
					<el-descriptions-item label="交强险失效日期">
						{{ displayData?.trafficInsuranceExpiry }}
					</el-descriptions-item>
					<el-descriptions-item label="商业险生效日期">
						{{ displayData?.commercialInsuranceEffective }}
					</el-descriptions-item>
					<el-descriptions-item label="商业险失效日期">
						{{ displayData?.commercialInsuranceExpiry }}
					</el-descriptions-item>
					<el-descriptions-item label="超赔险生效日期">
						{{ displayData?.overCompensationEffective }}
					</el-descriptions-item>
					<el-descriptions-item label="超赔险失效日期">
						{{ displayData?.overCompensationExpiry }}
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 挂车信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					挂车信息
				</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="行驶证编号">
						{{ displayData?.trailerTravelCertNo }}
					</el-descriptions-item>
					<el-descriptions-item label="行驶证失效日期">
						{{ displayData?.trailerTravelCertExpiry }}
					</el-descriptions-item>
					<el-descriptions-item label="道路运输许可证号">
						{{ displayData?.trailerTransportCertNo }}
					</el-descriptions-item>
					<el-descriptions-item label="运输证失效日期">
						{{ displayData?.trailerTransportCertExpiry }}
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 附件信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					附件信息
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="mb-2">车辆正面</div>
						<el-image
							v-if="displayData?.vehicleFrontImage"
							:src="displayData.vehicleFrontImage"
							:preview-src-list="[displayData.vehicleFrontImage]"
							fit="cover"
							class="w-full h-40 object-cover rounded"
						>
							<template #error>
								<div
									class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
								>
									<el-icon :size="24" class="text-gray-400"
										><Picture
									/></el-icon>
								</div>
							</template>
						</el-image>
						<div
							v-else
							class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
						>
							<el-icon :size="24" class="text-gray-400"><Picture /></el-icon>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="mb-2">行驶证</div>
						<el-image
							v-if="displayData?.travelCertImage"
							:src="displayData.travelCertImage"
							:preview-src-list="[displayData.travelCertImage]"
							fit="cover"
							class="w-full h-40 object-cover rounded"
						>
							<template #error>
								<div
									class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
								>
									<el-icon :size="24" class="text-gray-400"
										><Picture
									/></el-icon>
								</div>
							</template>
						</el-image>
						<div
							v-else
							class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
						>
							<el-icon :size="24" class="text-gray-400"><Picture /></el-icon>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="mb-2">道路运输许可证</div>
						<el-image
							v-if="displayData?.transportCertImage"
							:src="displayData.transportCertImage"
							:preview-src-list="[displayData.transportCertImage]"
							fit="cover"
							class="w-full h-40 object-cover rounded"
						>
							<template #error>
								<div
									class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
								>
									<el-icon :size="24" class="text-gray-400"
										><Picture
									/></el-icon>
								</div>
							</template>
						</el-image>
						<div
							v-else
							class="flex items-center justify-center w-full h-40 bg-gray-100 rounded"
						>
							<el-icon :size="24" class="text-gray-400"><Picture /></el-icon>
						</div>
					</el-col>
				</el-row>
			</div>

			<!-- 准驾司机信息 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					准驾司机信息
				</div>
				<el-descriptions :column="2" border>
					<el-descriptions-item
						v-for="(driver, index) in displayData?.drivers"
						:key="index"
					>
						<template #label>
							<div class="flex items-center">
								<el-avatar :size="24" class="mr-2" />
								{{ driver.name }}
							</div>
						</template>
						<div>参运趟次：{{ driver.tripCount }}趟</div>
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 维修记录 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					维修记录
				</div>
				<el-table
					:data="displayData?.maintenanceRecords"
					border
					style="width: 100%"
				>
					<el-table-column
						type="index"
						label="序号"
						width="60"
						align="center"
					/>
					<el-table-column prop="date" label="维修时间" width="180" />
					<el-table-column prop="content" label="维修内容" min-width="200" />
					<el-table-column
						prop="cost"
						label="维修费用"
						width="120"
						align="right"
					/>
					<el-table-column prop="maintainer" label="送修人员" width="120" />
					<el-table-column prop="recorder" label="记录人" width="120" />
					<el-table-column prop="recordTime" label="记录时间" width="180" />
					<el-table-column prop="reportNo" label="报修单号" width="180" />
					<el-table-column label="操作" width="80" fixed="right">
						<template #default>
							<el-button type="primary" link>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 保养记录 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					保养记录
				</div>
				<el-table
					:data="displayData?.maintenanceRecords"
					border
					style="width: 100%"
				>
					<el-table-column
						type="index"
						label="序号"
						width="60"
						align="center"
					/>
					<el-table-column prop="date" label="保养时间" width="180" />
					<el-table-column prop="type" label="保养类型" width="120" />
					<el-table-column prop="content" label="保养内容" min-width="200" />
					<el-table-column
						prop="cost"
						label="保养费用"
						width="120"
						align="right"
					/>
					<el-table-column prop="maintainer" label="送养人员" width="120" />
					<el-table-column prop="recorder" label="记录人" width="120" />
					<el-table-column prop="recordTime" label="记录时间" width="180" />
					<el-table-column label="操作" width="80" fixed="right">
						<template #default>
							<el-button type="primary" link>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 换电记录 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					换电记录
				</div>
				<el-table
					:data="displayData?.batteryRecords"
					border
					style="width: 100%"
				>
					<el-table-column
						type="index"
						label="序号"
						width="60"
						align="center"
					/>
					<el-table-column prop="dateTime" label="换电时间" width="180" />
					<el-table-column
						prop="stationName"
						label="换电站名称"
						min-width="200"
					/>
					<el-table-column prop="cost" label="费用" width="120" align="right" />
					<el-table-column prop="maintainer" label="送修人员" width="120" />
					<el-table-column prop="recorder" label="记录人" width="120" />
					<el-table-column prop="recordTime" label="记录时间" width="180" />
					<el-table-column label="操作" width="80" fixed="right">
						<template #default>
							<el-button type="primary" link>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 违法记录 -->
			<div class="mb-6">
				<div class="text-base font-bold mb-4 flex items-center">
					<div class="w-1 h-4 bg-primary mr-2"></div>
					违法记录
				</div>
				<el-table
					:data="displayData?.violationRecords"
					border
					style="width: 100%"
				>
					<el-table-column
						type="index"
						label="序号"
						width="60"
						align="center"
					/>
					<el-table-column prop="dateTime" label="违法时间" width="180" />
					<el-table-column prop="action" label="违法行为" min-width="200" />
					<el-table-column prop="location" label="违法地点" min-width="200" />
					<el-table-column prop="fine" label="罚款" width="120" align="right" />
					<el-table-column
						prop="points"
						label="记分"
						width="80"
						align="center"
					/>
					<el-table-column prop="driver" label="驾驶司机" width="120" />
					<el-table-column prop="recorder" label="记录人" width="120" />
					<el-table-column prop="recordTime" label="记录时间" width="180" />
					<el-table-column label="操作" width="80" fixed="right">
						<template #default>
							<el-button type="primary" link>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';
import { getVehicleById, addVehicle } from '/@/api/tscompany/vehicle';
import { useDict } from '/@/hooks/dict';

// 获取字典数据
const { vehicle_type } = useDict(['vehicle_type']);
const { energy_type } = useDict(['energy_type']);
const { business_type } = useDict(['business_type']);

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	detailData: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['update:modelValue']);

const drawerVisible = ref(false);
const loading = ref(false);
const vehicleDetail = ref(null);

// 计算标题
const title = computed(() => {
	const data = vehicleDetail.value || props.detailData;
	return `${data?.hphm || ''} - 车辆详情`;
});

// 监听抽屉显示状态
watch(
	() => props.modelValue,
	async (val) => {
		drawerVisible.value = val;
		if (val && props.detailData && props.detailData.id) {
			// 如果有ID，通过API获取最新的详细数据
			await fetchVehicleDetail(props.detailData.id);
		}
	},
);

// 监听抽屉关闭
watch(drawerVisible, (val) => {
	emit('update:modelValue', val);
	if (!val) {
		// 重置数据
		vehicleDetail.value = null;
	}
});

// 获取车辆详情
const fetchVehicleDetail = async (id) => {
	loading.value = true;
	try {
		const res = await getVehicleById(id);
		if (res && res.code === 200) {
			vehicleDetail.value = res.data;
		} else {
			ElMessage.error(res.msg || '获取车辆详情失败');
		}
	} catch (error) {
		console.error('获取车辆详情出错', error);
		ElMessage.error('获取车辆详情失败');
	} finally {
		loading.value = false;
	}
};

// 关闭抽屉
const handleClose = () => {
	drawerVisible.value = false;
};

// 计算最终显示的数据（优先使用API获取的数据）
const displayData = computed(() => {
	return vehicleDetail.value || props.detailData || {};
});

// 车辆类型显示
const getVehicleTypeText = (type) => {
	if (!type) return '-';
	const found = vehicle_type.value.find((item) => item.value === type);
	return found ? found.label : type;
};

// 能源类型显示
const getEnergyTypeText = (type) => {
	if (!type) return '-';
	const found = energy_type.value.find((item) => item.value === type);
	return found ? found.label : type;
};

// 经营类型显示
const getBusinessTypeText = (type) => {
	if (!type) return '-';
	const found = business_type.value.find((item) => item.value === type);
	return found ? found.label : type;
};
</script>

<style scoped>
:deep(.el-descriptions__label) {
	width: 120px;
	justify-content: flex-end;
	background-color: var(--el-fill-color-light);
}

:deep(.el-drawer__header) {
	margin-bottom: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--el-border-color-light);
}

:deep(.el-table) {
	--el-table-border-color: var(--el-border-color-lighter);
}

:deep(.el-descriptions) {
	--el-descriptions-item-bordered-label-background: var(--el-fill-color-light);
}
</style>
